<template>
  <div>
    <el-cascader v-model="currentValue" :props="props" :options="items" :show-all-levels="showAllLevels" :disabled="disabled" clearable filterable :filter-method="filterMethod" :placeholder="placeholder" style="width:100%" @change="change"></el-cascader>
    <!-- <el-button slot="suffix" icon="el-icon-refresh" title="刷新"></el-button> -->
  </div>
</template>

<script>
import { getPositionList } from "@/api/business/position";

export default {
  name: "ApePositionSelector",
  props: {
    multiple: {
      type: Boolean,
      default: false
    },
    multipleLimit: {
      type: Number,
      default: 0 // 0代表不限制
    },
    showAllLevels: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    value: {
      type: [String, Array],
      default: undefined
    },
    placeholder: {
      type: String,
      default: '请选择职位'
    }
  },
  data() {
    return {
      props: {
        emitPath: false,
        value: 'id',
        label: 'name',
        multiple: this.multiple
      },
      currentValue: this.value,
      items: []
    };
  },
  watch: {
    value(newValue) {
      this.currentValue = newValue;
    }
  },
  mounted() {
    this.load();
  },
  methods: {
    change(val) {
      this.$emit("input", val);
      this.$emit("change", val);
    },
    load() {
      this.getList();
    },
    open() {
      this.dialogVisible = true
    },
    getList() {
      const q = {
        data_type: undefined
      };
      getPositionList(q).then(result => {
        this.items = result;
      });
    },
    filterMethod(node, keyword) {
      if (keyword) {
        return node.data &&
          (node.data.name.indexOf(keyword) > -1 ||
            node.data.first_letter.indexOf(keyword) > -1
          )
      } else {
        return true
      }
    }
  }
};
</script>
